@mixin triangle($size:20px,$color:red,$direc:up){
	width: 0;
	height: 0;
	display: inline-block;
	border-width: $size;
	border-style: solid;
	@if $direc == 'up'{
		border-color: $color transparent transparent transparent;
	}@if $direc == 'right'{
		border-color: transparent $color transparent transparent;
	}@if $direc == 'down'{
		border-color: transparent transparent $color transparent;
	}@if $direc == 'left'{
		border-color: transparent transparent transparent $color;
	}
	
}
$list: (color:red,direction:up),(color:blue,direction:right),
	(color:orange,direction:down),(color:green,direction:left);
@for $i from 1 through 4{
	$item: nth($list,$i);
	.color#{$i}{
		@include triangle(20px * $i,map-get($item,'color'),map-get($item,'direction'));
	}
}